<template>
  <div
    class="product-category-filter"
    :style="{ width: fold ? '240px' : 0, paddingRight: fold ? '20px' : 0 }"
  >
    <div v-show="fold">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        size="small"
      >
      </el-input>
      <el-tree
        style="margin-top: 10px"
        :data="treeCategory"
        :props="{ label: 'name' }"
        accordion
        @node-click="onNodeClick"
      >
        <template v-slot:default="{ data }">
          <div style="display: flex; align-items: center; font-size: 14px">
            <el-image
              :src="data.banner_image_alt"
              style="width: 30px"
            ></el-image>
            <span>{{ data.name }}</span>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "ProductCategoryFilter",
  props: {
    fold: {
      default: false,
    },
    cid: {
      type: [Number, String],
    },
    cname: {
      type: String,
    },
  },
  data() {
    return {
      filterText: "",
    };
  },
  computed: {
    ...mapGetters(["treeCategory"]),
  },
  methods: {
    onNodeClick({ id, name }, node) {
      if (node.isLeaf) {
        this.$emit("update:cid", id);
        this.$emit("update:cname", name);
      }
    },
  },
};
</script>

<style scoped>
.product-category-filter {
  transition: all 0.5s;
  padding-right: 20px;
  padding-top: 10px;
  flex-shrink: 0;
}
</style>
